<div
  class="p-2 rounded flex flex-row items-center relative cursor-pointer hover:bg-background hover:border-gray-200 border border-gray-100 hover:shadow-sm"
>
  <div
    class="h-8 w-8 rounded-full bg-opacity-50 bg-gray-900 flex-shrink-0 text-white text-lg text-center"
    style="background-color: {{ color }};"
  >
    {{ icon }}
  </div>
  <span
    class="px-3 truncate text-sm text-main label flex-grow flex-shrink"
    [title]="label"
    >{{ label }}</span
  >
  <div
    class="text-gray-600 text-sm border-gray-300 border-l px-3 flex-shrink-0"
    style="min-width: 7rem"
  >
    <strong class="count text-gray-600">{{ count }}</strong
    >&nbsp;<span translate>records</span>.
  </div>
</div>
